<template>
  <div class="w-full min-h-screen mt-2">
    <div class="container mx-auto w-3/4">
      <nav class="bg-white border-gray-200">
        <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
          <div class="w-full md:block md:w-auto" id="navbar-default">
            <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white">
              <li>
                <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0" aria-current="page">全部</a>
              </li>
              <li>
                <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">Web</a>
              </li>
              <li>
                <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">Ai</a>
              </li>
              <li>
                <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">App</a>
              </li>
              <li>
                <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">大数据</a>
              </li>
            </ul>
          </div>
          <div class="text-gray-800 flex space-x-5">
            <label>
              <input type="checkbox"/>
              未开始
            </label>
            <label>
              <input type="checkbox"/>
              进行中
            </label>
            <label>
              <input type="checkbox"/>
              已完成
            </label>
          </div>
        </div>
      </nav>
      <div class="w-full h-full mt-2">
        <div class="flex flex-col mx-auto space-y-8">
           <div class="flex space-x-12">
             <div @mouseover="LearnMore1=true" @mouseleave="LearnMore1=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img21.jpg')]">
               <div class="flex items-center">
                 <div class="flex absolute bottom-0 min-h-[30%] w-full" :class="{'bg-white':LearnMore1}">
                   <h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900" v-if="LearnMore1">项目标题</h5>
                   <div class="ml-auto mr-10">
                     <button v-if="LearnMore1" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                       <svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                       </svg>
                     </button>
                   </div>
                 </div>
               </div>
             </div>
             <div @mouseover="LearnMore2=true" @mouseleave="LearnMore2=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img22.jpg')]">
               <div class="flex items-center">
                 <div class="flex absolute bottom-0 min-h-[30%] w-full" :class="{'bg-white':LearnMore2}">
                   <h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900" v-if="LearnMore2">项目标题</h5>
                   <div class="ml-auto mr-10">
                     <button v-if="LearnMore2" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                       <svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                       </svg>
                     </button>
                   </div>
                 </div>
               </div>
             </div>
             <div @mouseover="LearnMore3=true" @mouseleave="LearnMore3=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img23.jpg')]">
               <div class="flex items-center">
                 <div class="flex absolute bottom-0 min-h-[30%] w-full" :class="{'bg-white':LearnMore3}">
                   <h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900" v-if="LearnMore3">项目标题</h5>
                   <div class="ml-auto mr-10">
                     <button v-if="LearnMore3" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                       <svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                       </svg>
                     </button>
                   </div>
                 </div>
               </div>
             </div>
           </div>
          <div class="flex space-x-12">
            <div @mouseover="LearnMore4=true" @mouseleave="LearnMore4=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img24.jpg')]">
              <div class="flex items-center">
                <div class="flex absolute bottom-0 min-h-[30%] w-full" :class="{'bg-white':LearnMore4}">
                  <h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900" v-if="LearnMore4">项目标题</h5>
                  <div class="ml-auto mr-10">
                    <button v-if="LearnMore4" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                      <svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div @mouseover="LearnMore5=true" @mouseleave="LearnMore5=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img25.jpg')]">
              <div class="flex items-center">
                <div class="flex absolute bottom-0 min-h-[30%] w-full" :class="{'bg-white':LearnMore5}">
                  <h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900" v-if="LearnMore5">项目标题</h5>
                  <div class="ml-auto mr-10">
                    <button v-if="LearnMore5" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                      <svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div @mouseover="LearnMore6=true" @mouseleave="LearnMore6=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img26.jpg')]">
              <div class="flex items-center">
                <div class="flex absolute bottom-0 min-h-[30%] w-full" :class="{'bg-white':LearnMore6}">
                  <h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900" v-if="LearnMore6">项目标题</h5>
                  <div class="ml-auto mr-10">
                    <button v-if="LearnMore6" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                      <svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <nav aria-label="Page navigation example" class="mt-10">
        <ul class="flex items-center -space-x-px h-10 text-base">
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700">
              <span class="sr-only">Previous</span>
              <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
              </svg>
            </a>
          </li>
          <li>
            <a href="#" aria-current="page" class="flex items-center justify-center px-4 h-10 leading-tight text-blue-600 bg-blue-50 border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
              1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
              2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-blue-300 hover:bg-blue-100 hover:text-blue-700">
              3
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
              4
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">
              5
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700">
              <span class="sr-only">Next</span>
              <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
              </svg>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      LearnMore1:false,
      LearnMore2:false,
      LearnMore3:false,
      LearnMore4:false,
      LearnMore5:false,
      LearnMore6:false,
    };
  },
};
</script>